<script lang="js" setup name="ToolbarButton">
import { ref, computed, reactive, onMounted, onUnmounted } from "vue";
import XMenu from "./XMenu/XMenu.vue";

const props = defineProps({
	btnInfo: {
		type: Object,
		required: true,
	},
});

const emit = defineEmits(["action", "showMenu", "hideMenu"]);
// const pressed = ref(false);
const mouseState = ref(0);
const btnOnly = ref(null);
const btnHasMenu = ref(null);
const xMenu = ref(null);
const isMobile = ref(false);
const btn = reactive(props.btnInfo);
const hasMenu = computed(() => btn.menu && btn.menu.length > 0);
const mouseStateStyle = computed(() => {
	switch (mouseState.value) {
		case 1: return 'mousestate-l';
		case 2: return 'mousestate-m';
		case 3: return 'mousestate-r';
		case 4: return 'mousestate-lm';
		case 5: return 'mousestate-lr';
		case 6: return 'mousestate-mr';
		case 7: return 'mousestate-lmr';
		default: return '';
	}
});

// 检测移动端设备
const checkMobile = () => {
	const width = window.innerWidth;
	const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

	// 更精确的移动端检测
	isMobile.value = width <= 768 ||
		/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
		isTouchDevice;

	// 移动端优化：添加视口缩放检测
	if (isMobile.value) {
		// 防止双击缩放
		document.documentElement.style.touchAction = 'manipulation';
		// 优化滚动性能
		document.documentElement.style.webkitOverflowScrolling = 'touch';
		// 添加移动端特定样式类
		document.body.classList.add('mobile-device');

		// 移动端优化：设置视口
		const viewport = document.querySelector('meta[name="viewport"]');
		if (viewport) {
			viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
		}
	} else {
		document.body.classList.remove('mobile-device');
	}
};

// 添加触摸事件处理
const onTouchStart = (e) => {
	if (isMobile.value && e.currentTarget) {
		e.currentTarget.style.backgroundColor = 'var(--color-tbbtn-active)';
	}
};

const onTouchEnd = (e) => {
	if (isMobile.value && e.currentTarget) {
		setTimeout(() => {
			if (e.currentTarget) {
				e.currentTarget.style.backgroundColor = '';
			}
		}, 150);
	}
};

// 移动端点击事件处理
const onButtonClick = (e) => {
	if (isMobile.value) {
		e.preventDefault();
		e.stopPropagation();
		// 移动端使用触摸事件，避免双击缩放问题
		// 添加防抖处理，防止快速连续点击
		if (btn.action && !e._processed) {
			e._processed = true;
			setTimeout(() => {
				e._processed = false;
			}, 300);

			// 移动端触觉反馈（如果设备支持）
			if (navigator.vibrate) {
				navigator.vibrate(10);
			}

			emit("action", btn);
		}
	} else {
		// 桌面端原有逻辑
		e.stopPropagation();
		if (btn.action) {
			emit("action", btn);
		}
	}
};

onMounted(() => {
	checkMobile();
	window.addEventListener('resize', checkMobile);
});

onUnmounted(() => {
	window.removeEventListener('resize', checkMobile);
});

const onMenuClick = (menu) => {
	if (menu.changebtn) {
		btn.id = menu.id;
		btn.icon = menu.icon;
		btn.btnText = menu.text;
		menu.pressed = btn.pressed;
		// console.log('onMenuClick:', menu, props.btnInfo);
	}

	emit("action", menu);
};

const onExpandMenu = (e) => {
	e.stopPropagation();
	if (!btnHasMenu.value || !xMenu.value) return;

	// 移动端防抖处理
	if (isMobile.value && e._processed) return;
	e._processed = true;
	setTimeout(() => {
		e._processed = false;
	}, 300);

	const rect = btnHasMenu.value.getBoundingClientRect();

	// 移动端适配：调整菜单位置，避免被屏幕边缘遮挡
	let menuLeft = rect.left;
	let menuTop = rect.bottom;

	if (isMobile.value) {
		// 移动端确保菜单不会超出屏幕边界
		const screenWidth = window.innerWidth;
		const screenHeight = window.innerHeight;
		const menuWidth = 200; // 预估菜单宽度

		if (menuLeft + menuWidth > screenWidth) {
			menuLeft = screenWidth - menuWidth - 10;
		}

		if (menuTop > screenHeight - 200) {
			menuTop = rect.top - 200;
		}
	}

	xMenu.value.show(btn.menu, {left: menuLeft, top: menuTop, top2: rect.top});
};

const onLeaveBtn = (e) => {
	if (!xMenu.value) return;
	const rect = xMenu.value.getRect();
	const x = e.clientX;
	const y = e.clientY;
	if (x < rect.left-1 || x > rect.right+1 || y < rect.top-1 || y > rect.bottom+1) {
		// console.log('hide menu', x, y, rect);
		xMenu.value.hide();
	}
};

const onLeaveMenu = (e) => {
	if (!btnHasMenu.value || !xMenu.value) return;
	const rect = btnHasMenu.value.getBoundingClientRect();
	const x = e.clientX;
	const y = e.clientY;
	if (x < rect.left-1 || x > rect.right+1 || y < rect.top-1 || y > rect.bottom+1) {
		// console.log('hide menu', x, y, rect);
		xMenu.value.hide();
	}
};

const getBtnInfo = () => {
	// return props.btnInfo;
	return btn;
};

const setMouse = (state) => {
	mouseState.value = state;
};

const getMouse = () => {
	return mouseState.value;
};

const updateMouse = (state) => {
	mouseState.value = state;
};

defineExpose({
	getBtnInfo,
	setMouse,
	getMouse,
	updateMouse,
});
</script>

<template>
	<div class="container">
		<XMenu ref="xMenu" @menuclick="onMenuClick" @mouseleave="onLeaveMenu" />
		<div
			v-if="hasMenu"
			ref="btnHasMenu"
			:class="['tbbutton-drop', btn.pressed ? 'tbbutton-press' : '']"
			:id="btn.id"
			@keydown.prevent
			@mouseleave="onLeaveBtn"
			@touchstart="onTouchStart"
			@touchend="onTouchEnd"
		>
			<div
				class="tbbutton-indrop"
				@mousedown.stop="onButtonClick"
				@touchstart="onButtonClick"
			>
				<svg-icon class="tbicon-fill" :icon="btn.icon"></svg-icon>
				<div class="icondrop" @click="onExpandMenu" @touchstart="onExpandMenu">
					<svg-icon v-if="hasMenu" class="tbicon-fill" icon="icon-drop" />
				</div>
				<div
					v-if="mouseState > 0"
					class="mouseicon-drop"
					:class="mouseStateStyle"
				></div>
			</div>
			<div class="tbtext">{{ btn.btnText }}</div>
		</div>
		<div
			v-else
			ref="btnOnly"
			:class="['tbbutton', btn.pressed ? 'tbbutton-press' : '']"
			:id="btn.id"
			@keydown.prevent
			@mousedown.stop="onButtonClick"
			@touchstart="onButtonClick"
			@touchend="onTouchEnd"
		>
			<svg-icon class="tbicon-fill" :icon="btn.icon"></svg-icon>
			<div class="tbtext">{{ btn.btnText }}</div>
			<div v-if="mouseState > 0" class="mouseicon" :class="mouseStateStyle"></div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.tbbutton {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 4.8rem;
	height: 4.8rem;
	min-width: 48px;
	min-height: 48px;
	margin: 1px;
	border-radius: 4px;
	transition: background-color 0.2s ease, transform 0.1s ease;
	cursor: pointer;

	/* 移动端优化 */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;

	.tbtext {
		margin-top: 4px;
		font-size: 1.2rem;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	:deep(.tbicon-fill) {
		width: 16px;
		height: 16px;
		min-width: 16px;
		min-height: 16px;
	}
}

.tbbutton-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 1px;
	border-radius: 4px;
	transition: background-color 0.2s ease, transform 0.1s ease;
	cursor: pointer;

	/* 移动端优化 */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;

	/* 主图标和下拉图标左右布局，整体与文字上下布局 */
	width: 4.8rem;
	height: 4.8rem;
	min-width: 48px;
	min-height: 48px;

	.tbbutton-indrop {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 4px;
		margin-bottom: 4px;

		:deep(.tbicon-fill) {
			width: 16px;
			height: 16px;
			min-width: 16px;
			min-height: 16px;
		}

		.icondrop {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 4px;

			:deep(.tbicon-fill) {
				width: 12px;
				height: 12px;
				min-width: 12px;
				min-height: 12px;
			}
		}
	}
}

.tbbutton-press {
	// background-color: #f0f0f0;
	background-color: var(--color-tbbtn-pressed);
	border: 1px solid #ccc;
	border-radius: 4px;
}

.tbbutton-indrop {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	gap: 4px;
	padding: 0;
	flex: none;
}

/* 下拉按钮文字显示在下方 */
.tbbutton-drop .tbtext {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	margin-top: 4px;
}

/* 隐藏原有的下拉箭头伪元素 */
.tbbutton-indrop::after {
	display: none;
}

.tbbutton:hover,
.tbbutton-drop:hover {
	background-color: var(--color-tbbtn-hover);
	border-radius: 5px;
}

.tbbutton:active,
.tbbutton-drop:active {
	background-color: var(--color-tbbtn-active);
	transform: scale(0.95);
}

:deep(.tbicon-fill) {
	fill: var(--color-theme-text);
	// fill: blue;
}

.tbtext {
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 1.2em;
	line-height: 1.2;
	text-align: center;
	overflow: visible;
	white-space: nowrap;
	word-break: keep-all;
	word-wrap: normal;
	padding: 0 2px;
	box-sizing: border-box;
	max-width: 100%;
	text-overflow: ellipsis;
}

span {
	-moz-user-select: none;
	user-select: none;
}

.icondrop {
	height: auto;
	width: auto;
	fill: var(--color-theme-text);
	display: flex;
	align-items: center;
	justify-content: center;
}

// .icondrop {
// 	position: absolute;
// 	right: 0;
// 	top: 0;
// 	height: 2rem;
// 	width: 2rem;
// 	fill: var(--color-theme-text);
// }

.icondrop:hover {
	border-left: 1px solid #aaa;
	border-right: 1px solid var(--color-tbbtn-hover);
	border-radius: 0px 5px 5px 0px;
	// background-color: var(--color-tbbtn-hover);
}

.mouseicon {
	position: absolute;
	width: 11px;
	height: 16px;
	left: 14px;
	top: 24px;
}

.mouseicon-drop {
	position: absolute;
	width: 11px;
	height: 16px;
	left: 14px;
	top: 24px;
}

.mousestate-l {
	background: url(../assets/images/mouse_l.png) no-repeat center center;
}

.mousestate-lm {
	background: url(../assets/images/mouse_lm.png) no-repeat center center;
}

.mousestate-lmr {
	background: url(../assets/images/mouse_lmr.png) no-repeat center center;
}

.mousestate-lr {
	background: url(../assets/images/mouse_lr.png) no-repeat center center;
}

.mousestate-m {
	background: url(../assets/images/mouse_m.png) no-repeat center center;
}

.mousestate-mr {
	background: url(../assets/images/mouse_mr.png) no-repeat center center;
}

.mousestate-r {
	background: url(../assets/images/mouse_r.png) no-repeat center center;
}

/* 超小屏幕手机 (320px - 480px) */
@media (max-width: 480px) {
	.tbbutton {
		/* 移动端：保持垂直布局 */
		flex-direction: column;
		width: 3.6rem;
		height: 3.6rem;
		min-width: 36px;
		min-height: 36px;
		margin: 1px;
		border-radius: 6px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbtext {
			font-size: 10px;
			line-height: 1.1;
			margin-top: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			height: auto;
			min-height: 1.1em;
			word-break: keep-all;
			word-wrap: normal;
			padding: 0 1px;
			box-sizing: border-box;
		}

		:deep(.tbicon-fill) {
			width: 14px;
			height: 14px;
			min-width: 14px;
			min-height: 14px;
		}
	}

	.tbbutton-drop {
		/* 移动端：保持垂直布局 */
		flex-direction: column;
		width: 3.6rem;
		height: 3.6rem;
		min-width: 36px;
		min-height: 36px;
		margin: 1px;
		border-radius: 6px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbbutton-indrop {
			width: auto;
			min-width: auto;
			margin-bottom: 2px;

			.tbtext {
				display: none;
			}

			:deep(.tbicon-fill) {
				width: 14px;
				height: 14px;
				min-width: 14px;
				min-height: 14px;
			}
		}

		.icondrop {
			width: auto;
			min-width: auto;

			/* 移动端下拉图标优化 */
			display: flex;
			align-items: center;
			justify-content: center;

			:deep(.tbicon-fill) {
				width: 10px;
				height: 10px;
				min-width: 10px;
				min-height: 10px;
			}
		}

		.tbtext {
			font-size: 10px;
			line-height: 1.1;
			margin-top: 0;
		}
	}

	.mouseicon,
	.mouseicon-drop {
		width: 5px;
		height: 8px;
		left: 8px;
		top: 12px;
	}

	/* 移动端触摸反馈优化 */
	.tbbutton:active,
	.tbbutton-drop:active {
		background-color: var(--color-tbbtn-active);
		transform: scale(0.92);
		transition: transform 0.1s ease, background-color 0.1s ease;
	}
}

/* 极小型手机 (320px以下) */
@media (max-width: 320px) {
	.tbbutton {
		width: 3.8rem;
		height: 3.8rem;
		min-width: 38px;
		min-height: 38px;
		padding: 3px;
		margin: 1px;
		border-radius: 6px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbtext {
			font-size: 0.7rem;
			line-height: 1;
			text-align: center;
			margin-top: 1px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			height: auto;
			min-height: 1em;
			word-break: keep-all;
			word-wrap: normal;
			padding: 0 1px;
			box-sizing: border-box;
		}

		:deep(.tbicon-fill) {
			width: 18px;
			height: 18px;
			min-width: 18px;
			min-height: 18px;
		}
	}

	.tbbutton-drop {
		width: 4.6rem;
		height: 3.8rem;
		min-width: 46px;
		min-height: 38px;
		margin: 1px;
		border-radius: 6px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbbutton-indrop {
			width: 3.2rem;

			.tbtext {
				font-size: 0.7rem;
				line-height: 1;
				margin-top: 1px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 100%;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				height: auto;
				min-height: 1em;
				word-break: keep-all;
				word-wrap: normal;
				padding: 0 1px;
				box-sizing: border-box;
			}

			:deep(.tbicon-fill) {
				width: 18px;
				height: 18px;
				min-width: 18px;
				min-height: 18px;
			}
		}

		.icondrop {
			width: 1.4rem;
			min-width: 14px;

			/* 移动端下拉图标优化 */
			display: flex;
			align-items: center;
			justify-content: center;

			:deep(.tbicon-fill) {
				width: 12px;
				height: 12px;
				min-width: 12px;
				min-height: 12px;
			}
		}
	}

	.mouseicon,
	.mouseicon-drop {
		width: 5px;
		height: 8px;
		left: 6px;
		top: 14px;
	}

	/* 移动端触摸反馈优化 */
	.tbbutton:active,
	.tbbutton-drop:active {
		background-color: var(--color-tbbtn-active);
		transform: scale(0.92);
		transition: transform 0.1s ease, background-color 0.1s ease;
	}
}

/* 小屏幕手机 (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
	.tbbutton {
		/* 移动端：保持垂直布局 */
		flex-direction: column;
		width: 4rem;
		height: 4rem;
		min-width: 40px;
		min-height: 40px;
		margin: 1px;
		border-radius: 6px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbtext {
			font-size: 11px;
			line-height: 1.1;
			margin-top: 3px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			height: auto;
			min-height: 1.1em;
			word-break: keep-all;
			word-wrap: normal;
			padding: 0 1px;
			box-sizing: border-box;
		}

		:deep(.tbicon-fill) {
			width: 15px;
			height: 15px;
			min-width: 15px;
			min-height: 15px;
		}
	}

	.tbbutton-drop {
		/* 移动端：保持垂直布局 */
		flex-direction: column;
		width: 4rem;
		height: 4rem;
		min-width: 40px;
		min-height: 40px;
		margin: 1px;
		border-radius: 6px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbbutton-indrop {
			width: auto;
			min-width: auto;
			margin-bottom: 3px;

			.tbtext {
				display: none;
			}

			:deep(.tbicon-fill) {
				width: 15px;
				height: 15px;
				min-width: 15px;
				min-height: 15px;
			}
		}

		.icondrop {
			width: auto;
			min-width: auto;

			/* 移动端下拉图标优化 */
			display: flex;
			align-items: center;
			justify-content: center;

			:deep(.tbicon-fill) {
				width: 11px;
				height: 11px;
				min-width: 11px;
				min-height: 11px;
			}
		}

		.tbtext {
			font-size: 11px;
			line-height: 1.1;
			margin-top: 0;
		}
	}

	.mouseicon,
	.mouseicon-drop {
		width: 6px;
		height: 10px;
		left: 10px;
		top: 14px;
	}

	/* 移动端触摸反馈优化 */
	.tbbutton:active,
	.tbbutton-drop:active {
		background-color: var(--color-tbbtn-active);
		transform: scale(0.92);
		transition: transform 0.1s ease, background-color 0.1s ease;
	}
}

/* 平板设备适配 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.tbbutton {
		/* 平板：垂直布局，适中尺寸 */
		flex-direction: column;
		width: 5.6rem;
		height: 5.2rem;
		min-width: 56px;
		min-height: 52px;
		margin: 1px;
		border-radius: 6px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbtext {
			font-size: 12px;
			line-height: 1.2;
			text-align: center;
			margin-top: 4px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			height: auto;
			min-height: 1.2em;
			word-break: keep-all;
			word-wrap: normal;
			padding: 0 2px;
			box-sizing: border-box;
		}

		:deep(.tbicon-fill) {
			width: 26px;
			height: 26px;
			min-width: 26px;
			min-height: 26px;
		}
	}

	.tbbutton-drop {
		/* 平板：保持垂直布局 */
		flex-direction: column;
		width: 5.6rem;
		height: 5.2rem;
		min-width: 56px;
		min-height: 52px;
		margin: 1px;
		border-radius: 6px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbbutton-indrop {
			width: auto;
			margin-bottom: 4px;

			.tbtext {
				display: none;
			}

			:deep(.tbicon-fill) {
				width: 26px;
				height: 26px;
				min-width: 26px;
				min-height: 26px;
			}

			.icondrop {
				:deep(.tbicon-fill) {
					width: 16px;
					height: 16px;
					min-width: 16px;
					min-height: 16px;
				}
			}
		}

		.tbtext {
			font-size: 12px;
			line-height: 1.2;
			margin-top: 0;
		}
	}

	.mouseicon,
	.mouseicon-drop {
		width: 10px;
		height: 14px;
		left: 12px;
		top: 19px;
	}

	/* 移动端触摸反馈优化 */
	.tbbutton:active,
	.tbbutton-drop:active {
		background-color: var(--color-tbbtn-active);
		transform: scale(0.92);
		transition: transform 0.1s ease, background-color 0.1s ease;
	}
}

/* 大屏幕平板/小桌面 (1025px - 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) {
	.tbbutton {
		width: 6rem;
		height: 5.6rem;
		min-width: 60px;
		min-height: 56px;
		margin: 1px;
		border-radius: 8px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbtext {
			font-size: 1.2rem;
			line-height: 1.3;
			text-align: center;
			margin-top: 5px;
			white-space: normal;
			overflow: visible;
			text-overflow: unset;
			max-width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			height: auto;
			min-height: 1.3em;
			word-break: break-all;
			word-wrap: break-word;
			padding: 0 2px;
			box-sizing: border-box;
		}

		:deep(.tbicon-fill) {
			width: 30px;
			height: 30px;
			min-width: 30px;
			min-height: 30px;
		}
	}

	.tbbutton-drop {
		width: 6rem;
		height: 5.6rem;
		min-width: 60px;
		min-height: 56px;
		margin: 1px;
		border-radius: 8px;

		/* 移动端触摸优化 */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		-webkit-user-select: none;
		user-select: none;

		.tbbutton-indrop {
			width: auto;
			margin-bottom: 4px;

			.tbtext {
				display: none;
			}

			:deep(.tbicon-fill) {
				width: 30px;
				height: 30px;
				min-width: 30px;
				min-height: 30px;
			}

			.icondrop {
				:deep(.tbicon-fill) {
					width: 18px;
					height: 18px;
					min-width: 18px;
					min-height: 18px;
				}
			}
		}

		.tbtext {
			font-size: 1.2rem;
			line-height: 1.3;
			margin-top: 0;
		}
	}

	.mouseicon,
	.mouseicon-drop {
		width: 11px;
		height: 15px;
		left: 14px;
		top: 20px;
	}

	/* 移动端触摸反馈优化 */
	.tbbutton:active,
	.tbbutton-drop:active {
		background-color: var(--color-tbbtn-active);
		transform: scale(0.92);
		transition: transform 0.1s ease, background-color 0.1s ease;
	}
}

/* 桌面端样式 (1367px以上) */
@media (min-width: 1367px) {
	.tbbutton {
		width: 6.4rem;
		height: 6rem;
		min-width: 64px;
		min-height: 60px;
		margin: 1px;
		border-radius: 8px;

		.tbtext {
			font-size: 1.3rem;
			line-height: 1.4;
			text-align: center;
			margin-top: 6px;
			white-space: normal;
			overflow: visible;
			text-overflow: unset;
			max-width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			height: auto;
			min-height: 1.4em;
			word-break: break-all;
			word-wrap: break-word;
			padding: 0 2px;
			box-sizing: border-box;
		}

		:deep(.tbicon-fill) {
			width: 32px;
			height: 32px;
			min-width: 32px;
			min-height: 32px;
		}
	}

	.tbbutton-drop {
		width: 6.4rem;
		height: 6rem;
		min-width: 64px;
		min-height: 60px;
		margin: 1px;
		border-radius: 8px;

		.tbbutton-indrop {
			width: auto;
			margin-bottom: 4px;

			.tbtext {
				display: none;
			}

			:deep(.tbicon-fill) {
				width: 32px;
				height: 32px;
				min-width: 32px;
				min-height: 32px;
			}

			.icondrop {
				:deep(.tbicon-fill) {
					width: 16px;
					height: 16px;
					min-width: 16px;
					min-height: 16px;
				}
			}
		}

		.tbtext {
			font-size: 1.3rem;
			line-height: 1.4;
			margin-top: 0;
		}
	}

	.mouseicon,
	.mouseicon-drop {
		width: 11px;
		height: 16px;
		left: 14px;
		top: 24px;
	}
}

/* 移动端横屏适配 */
@media (max-width: 768px) and (orientation: landscape) {
	.tbbutton {
		/* 横屏：保持垂直布局 */
		flex-direction: column;
		width: 3.2rem;
		height: 3.2rem;
		min-width: 32px;
		min-height: 32px;
		margin: 1px;
		border-radius: 4px;

		.tbtext {
			font-size: 9px;
			line-height: 1;
			margin-top: 2px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			height: auto;
			min-height: 1em;
			word-break: keep-all;
			word-wrap: normal;
			padding: 0 1px;
			box-sizing: border-box;
		}

		:deep(.tbicon-fill) {
			width: 12px;
			height: 12px;
			min-width: 12px;
			min-height: 12px;
		}
	}

	.tbbutton-drop {
		/* 横屏：保持垂直布局 */
		flex-direction: column;
		width: 3.2rem;
		height: 3.2rem;
		min-width: 32px;
		min-height: 32px;
		margin: 1px;
		border-radius: 4px;

		.tbbutton-indrop {
			width: auto;
			min-width: auto;
			margin-bottom: 2px;

			.tbtext {
				display: none;
			}

			:deep(.tbicon-fill) {
				width: 12px;
				height: 12px;
				min-width: 12px;
				min-height: 12px;
			}
		}

		.icondrop {
			width: auto;
			min-width: auto;

			:deep(.tbicon-fill) {
				width: 9px;
				height: 9px;
				min-width: 9px;
				min-height: 9px;
			}
		}

		.tbtext {
			font-size: 9px;
			line-height: 1;
			margin-top: 0;
		}
	}

	.mouseicon,
	.mouseicon-drop {
		width: 5px;
		height: 7px;
		left: 8px;
		top: 10px;
	}
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tbbutton,
	.tbbutton-drop {
		/* 提高触摸精度 */
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
	}
}

/* 无障碍访问优化 */
@media (prefers-reduced-motion: reduce) {
	.tbbutton,
	.tbbutton-drop {
		transition: none;
	}

	.tbbutton:active,
	.tbbutton-drop:active {
		transform: none;
		transition: none;
	}
}
</style>
